<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>cook book demo </title>

	<style>
		input[type="text"] {
			height: 30px;
			width: 300px;
			margin-bottom: 10px;
			border-radius: 5px;
			padding: 2px;
			font-size: 16px;

		}

		button {
			width: 100px;
			height: 40px;
		}

		input {
			height: 36px;
			width: 300px;

		}
	</style>

</head>

<body>


	<div id="app">

		<div class="search-bar">
			<form @submit.prevent="search">
				<input v-model="keyword" type="search" placeholder="搜书籍">
				<button type="submit">提交</button>
			</form>
		</div>

		<div class="result">
			<div v-for="book in result.books" class="result-item row">


				<div class="col col-2">
					<img :src="book.image">
				</div>

				<div class="col col-10">
					<div class="title">书名:{{book.title }} </div>
				</div>

				<div class="col col-10">
					<div class="price">价格:{{book.price | curracy}}</div>
				</div>

				<hr>
			</div>
		</div>

	</div>

	<script src="js/vue.js"></script>
	<script src="js/jquery.3.6.0.js"></script>
	<script src="js/main.js"></script>

</body>

</html>